<template>
    <div>
      <Modal v-model:visible="isOpen" mask-closable="false" hide-cancel="true" @close="close" width="60%" :modal-style="{
        height:'60vh'
      }" title="终端" draggable body-class="qpanel-shell" >
        <iframe :style="{ width: '100%', height: 'calc(100% - 8px)', border:'none'}" :src="shell_html" height="60vh">
          
        </iframe>
      </Modal>
    </div>
  </template>
  
  <script>
  import { Modal, Button } from "@arco-design/web-vue";
  import { ref } from "vue";

  export default {
    setup(){
    },
    components: {
      Modal,
      Button,
    },
    data() {
      return {
        isOpen: false,
        shell_html:""
      };
    },
    methods: {
      open() {
        this.isOpen = true;
        this.shell_html = ("/p/shell")
      },
      close() {
        this.isOpen = false;
        this.shell_html = ("");
      },
    },
  };
  </script>

  <style>
.qpanel-shell{
  height:calc(100% - 48px - 70px)
}</style>